CustomTheme
The CustomTheme object contains settings to customize the content theme (added as a separate property). The custom theme can cover an entire set of theme settings, or override a selection of settings. The custom theme override property of embedOptions takes the customTheme object to dynamically inject the changes into the current visual.
Using the CustomTheme Object
Constructors
- There is NO constructor for the CustomTheme object
- CustomTheme is made up of a collection of hierarchical properties (key-value pairs)
You do NOT need to supply the entire object - as settings will be adjusted for those properties supplied only.
To get a better sense of all the theme settings and options, see the theme editor in the admin.
Content Theme Object Groups
- general – global font styles and icons
- grid – context menu style and icons
- visuals – smart insights dialog style
- slicers – presentation specific styles, like the side menu
Nested Structure
The following code shows the ENTIRE CustomTheme structure with every property that can be set.
Object Structure
{
"General": {
"generalColor1": {
"color": ""
},
"generalColor2": {
"color": ""
},
"generalColor3": {
"color": ""
},
"generalColor4": {
"color": ""
},
"generalColor5": {
"color": ""
},
"generalColor6": {
"color": ""
},
"generalColor7": {
"color": ""
},
"generalColor8": {
"color": ""
},
"generalColor9": {
"color": ""
},
"generalColor1": {
"color": ""
},
"generalColor11": {
"color": ""
},
"generalColor12": {
"color": ""
},
"generalColor13": {
"color": ""
},
"generalColor14": {
"color": ""
},
"generalColor15": {
"color": ""
},
"generalColor16": {
"color": ""
},
"generalLinesColor": {
"color": ""
}
},
"Grid": {
"gridGeneral": {
"color": "",
"font-weight": "",
"background": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"gridColumnHeader": {
"padding": ,
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": "",
"verticalPadding":
},
"gridMatrixBorder": {
"stroke-width": ,
"stroke": ""
},
"gridMatrixColumns": {
"padding": ,
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": "",
"verticalPadding":
},
"gridMatrixDataCell": {
"color": ""
},
"gridTabularDataCell": {
"color": "",
"altFill": ""
},
"gridMatrixRows": {
"padding": ,
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": "",
"verticalPadding":
},
"gridColorMappingRows": {
"colorMapping":
},
"gridMatrixDataText": {
"padding": ,
"color": "",
"font-weight": "",
"text-anchor": "",
"font-size": "",
"font-family": "",
"font-style": "",
"verticalPadding":
},
"gridColorMappingColumns": {
"colorMapping":
},
"gridTabularTotalsDataCell": {
"color": ""
},
"gridRowHeader": {
"padding": ,
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": "",
"verticalPadding":
}
},
"Visuals": {
"visualsYAxisTitle": {
"color": "",
"font-weight": "",
"text-anchor": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualYGridLines": {
"stroke-width": ,
"stroke": ""
},
"visualsYTrellisAxis": {
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualsYTrellisAxisDomain": {
"stroke-width": ,
"stroke": ""
},
"visualsPlotArea": {
"color": "",
"stroke-width": ,
"stroke": ""
},
"visualsCartesianStyle": {
"opacity":
},
"visualsDataLabels": {
"color": "",
"font-weight": "",
"background": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualsYAxisDomain": {
"stroke-width": ,
"stroke": ""
},
"visualRangeColors": {
"endFill": "",
"actualValue": "",
"targetValue": "",
"startFill": "",
"middleFill": ""
},
"visualsXAxis": {
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualXGridLines": {
"stroke-width": ,
"stroke": ""
},
"visualsLegendBorder": {
"color": "",
"stroke-width": ,
"stroke": ""
},
"visualQuadBandRangeColors": {
"color1": "",
"color2": "",
"color3": "",
"color4": ""
},
"visualsGeneral": {
"color": "",
"font-weight": "",
"background": "",
"font-size": "",
"font-family": "",
"font-style": "",
"radius":
},
"visualDualBandRangeColors": {
"color1": "",
"color2": ""
},
"visualsXAxisDomain": {
"stroke-width": ,
"stroke": ""
},
"visualsDataPoints": {
"stroke-width":
},
"reportTitle": {
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualsYAxis": {
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualsLegendTitle": {
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualsXTrellisAxis": {
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualsXTrellisAxisDomain": {
"stroke": ""
},
"visualsLegend": {
"color": "",
"font-weight": "",
"legend-position": ,
"font-size": "",
"font-family": "",
"font-style": "",
"radius":
},
"visualsXAxisTitle": {
"color": "",
"font-weight": "",
"text-anchor": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualsMultiChartTitle": {
"color": "",
"font-weight": "",
"text-anchor": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"visualPentBandRangeColors": {
"color1": "",
"color2": "",
"color5": "",
"color3": "",
"color4": ""
}
},
"Slicers": {
"slicerGeneral": {
"slicerViewMode":
},
"slicerBorder": {
"border-color": "",
"border-width": ,
"radius":
},
"slicerTitle": {
"color": "",
"font-weight": "",
"font-size": "",
"font-family": "",
"font-style": ""
},
"slicerContentSelected": {
"color": "",
"font-weight": "",
"background": "",
"font-style": ""
},
"slicerContentNotSelected": {
"color": "",
"font-weight": "",
"background": "",
"font-style": ""
},
"slicerContentHighlight": {
"color": "",
"font-weight": "",
"background": "",
"font-style": ""
},
"slicerContent": {
"font-size": "",
"font-family": ""
}
}
};
Setting Properties
The following shows how to set some of the properties. In general, they follow standard CSS rules and standard CSS settings.
To see specific examples for each property, see examples below.
Fonts
Set fonts using standard CSS font settings
"font": "Roboto, sans-serif"
"font-size": "12px"
Colors
Set colors using standard CSS HEX numbers, RGB or more complex background fills like gradients
"color": "#f0f0f0"
"color": hsla(30, 100%, 50%. 0.6)
"color": rgba(34, 12, 64, 0.6)
Examples
Mini custom theme example
This uses only a part of the CustomTheme settings and then injects it into the embed client object. These settings will overwrite the content theme added .
const XcontentTheme = {
Visuals: {
visualsGeneral: {
"color": "rgba(72,91,104,1)",
"font-weight": "Bold",
"background": "#006699",
"font-size": "12px",
"font-family": "Roboto, sans-serif",
"font-style": "Normal",
"radius": 5,
},
};
const embedClient = new PyramidEmbedClient('https://mysite.com/');
const container = document.getElementById('embed-container');
embedClient.content(container, {
contentId: 'ABCD756-e465-4f29-9390-bf0ef1df9e93',
theme: "light",
contentThemeOverrides: XcontentTheme,
});
Full customtheme structure example
const customTheme = {
General: {
"generalColor1": {
"color": "rgba(14,175,219,1)",
},
"generalColor2" {
"color": "rgba(248,200,41,1)",
},
"generalColor3": {
"color": "rgba(62,183,155,1)",
},
"generalColor4": {
"color": "rgba(221,86,49,1)",
},
"generalColor5": {
"color": "rgba(127,110,183,1)",
},
"generalColor6": {
"color": "rgba(134,134,134,1)",
},
"generalColor7": {
"color": "rgba(176,79,116,1)",
},
"generalColor8": {
"color": "rgba(187,218,132,1)",
},
"generalColor9": {
"color": "rgba(239,129,55,1)",
},
"generalColor10": {
"color": "rgba(247,225,132,1)",
},
"generalColor11": {
"color": "rgba(229,120,99,1)",
},
"generalColor12": {
"color": "rgba(161,226,207,1)",
},
"generalColor13": {
"color": "rgba(173,167,214,1)",
},
"generalColor14": {
"color": "rgba(242,179,193,1)",
},
"generalColor15": {
"color": "rgba(242,131,150,1)",
},
"generalColor16": {
"color": "rgba(191,191,191,1)",
},
},
Visuals: {
visualsGeneral: {
"color": "rgba(72,91,104,1)",
"font-weight": "Normal",
"background": "rgba(255,255,255,1)",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
"radius": 0,
},
reportTitle: {
"color": "rgb(15, 7, 238)",
"font-weight": "Normal",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsMultiChartTitle: {
"color": "rgba(133,133,133,1)",
"font-weight": "Normal",
"text-anchor": "start",
"font-size": "14px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsLegend: {
"color": "rgba(72,91,104,1)",
"font-weight": "Normal",
"legend-position": 2,
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
"radius": 5,
},
visualsLegendBorder: {
"color": "rgba(255,255,255,1)",
"stroke-width": 1,
"stroke": "rgba(255,255,255,1)",
},
visualsLegendTitle: {
"color": "rgba(133,133,133,1)",
"font-weight": "Bold",
"font-size": "12px",
"font-family": "Segoe UI, Helvetica Neue, Arial, sans-serif",
"font-style": "Normal",
},
visualsXTrellisAxis: {
"color": "rgb(120, 120, 120, 1)",
"font-weight": "Normal",
"font-size": "10px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsXTrellisAxisDomain: {
"stroke": "rgba(255,255,255,1)",
},
visualsXAxis: {
"color": "rgba(120,120,120,1)",
"font-weight": "Normal",
"font-size": "10px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsXAxisDomain: {
"stroke-width": 1,
"stroke": "rgba(211,211,211,1)",
},
visualsXAxisTitle: {
"color": "rgba(72,91,104,1)",
"text-anchor": "middle",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsYTrellisAxis: {
"color": "rgb(120, 120, 120, 1)",
"font-weight": "Normal",
"font-size": "10px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsYTrellisAxisDomain: {
"stroke-width": 1,
"stroke": "rgba(255,255,255,1)",
},
visualsYAxis: {
"color": "rgba(120,120,120,1)",
"font-weight": "Normal",
"font-size": "10px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsYAxisDomain: {
"stroke-width": 1,
"stroke": "rgba(211,211,211,1)",
},
visualsYAxisTitle: {
"color": "rgb(0, 151, 251)",
"text-anchor": "middle",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsDataLabels: {
"color": "rgba(162,161,161,1)",
"font-weight": "Normal",
"background": "rgba(255,255,255,1)",
"font-size": "11px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
visualsPlotArea: {
"color": "rgb(242, 173, 173)",
"stroke-width": 1,
"stroke": "rgb(72, 61, 61)",
},
visualsCartesianStyle: {
"opacity": 1,
},
visualXGridLines: {
"stroke-width": 0.5,
"stroke": "rgba(211,211,211,1)",
},
visualYGridLines: {
"stroke-width": 0.5,
"stroke": "rgba(0, 151, 251, 1)",
},
visualsDataPoints: {
"stroke-width": 2,
},
visualRangeColors: {
"endFill": "rgba(14,175,219,1)",
"actualValue": "rgba(12,21,43,1)",
"targetValue": "rgba(14,175,219,1)",
"startFill": "rgba(248,200,41,1)",
"middleFill": "rgba(62,183,155,1)",
},
visualDualBandRangeColors: {
"color1": "rgba(248,200,41,1)",
"color2": "rgba(14,175,219,1)",
},
visualQuadBandRangeColors: {
"color1": "rgba(221,86,49,1)",
"color2": "rgba(248,200,41,1)",
"color3": "rgba(62,183,155,1)",
"color4": "rgba(14,175,219,1)",
},
visualPentBandRangeColors: {
"color1": "rgba(127,110,183,1)",
"color2": "rgba(221,86,49,1)",
"color5": "rgba(14,175,219,1)",
"color3": "rgba(248,200,41,1)",
"color4": "rgba(62,183,155,1)",
},
},
Grid: {
gridGeneral: {
"color": "rgba(12,21,43,1)",
"font-weight": "Normal",
"background": "rgba(255,255,255,1)",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
gridMatrixColumns: {
"padding": 3,
"color": "rgba(33,33,33,1)",
"font-weight": "Normal",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
"verticalPadding": 3,
},
gridColumnHeader: {
"padding": 3,
"color": "rgba(33,33,33,1)",
"font-weight": "Normal",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
"verticalPadding": 3,
},
gridMatrixRows: {
"padding": 3,
"color": "rgba(33,33,33,1)",
"font-weight": "Normal",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
"verticalPadding": 3,
},
gridRowHeader: {
"padding": 3,
"color": "rgba(255,255,255,1)",
"font-weight": "Normal",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
"verticalPadding": 3,
},
gridMatrixDataText: {
"padding": 3,
"color": "rgba(70,70,70,1)",
"font-weight": "Normal",
"text-anchor": "auto",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
"verticalPadding": 3,
},
gridMatrixDataCell: {
"color": "rgba(255,255,255,1)",
},
gridTabularDataCell: {
"color": "rgba(255,255,255,1)",
"altFill": "rgba(186,247,255,1)",
},
gridMatrixBorder: {
"stroke-width": 1,
"stroke": "rgba(209, 209, 209,1)",
},
gridColorMappingRows: {
"colorMapping": 1,
},
gridColorMappingColumns: {
"colorMapping": 2,
},
gridTabularTotalsDataCell: {
"color": "rgba(36,211,198,1)",
},
},
Slicers: {
slicerGeneral: {
"slicerViewMode": 1,
},
slicerBorder: {
"border-color": "rgba(14,175,219,1)",
"border-width": 1,
"radius": 10,
},
slicerTitle: {
"color": "rgba(92,100,123,1)",
"font-weight": "Normal",
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
"font-style": "Normal",
},
slicerContent: {
"font-size": "12px",
"font-family": "Arial, Helvetica Neue, sans-serif",
},
slicerContentSelected: {
"color": "rgba(12,21,43,1)",
"font-weight": "Bold",
"background": "rgba(255,255,255,1)",
"font-style": "Normal",
},
slicerContentNotSelected: {
"color": "rgba(131,138,159,1)",
"font-weight": "Normal",
"background": "rgba(255,255,255,1)",
"font-style": "Normal",
},
slicerContentHighlight: {
"color": "rgba(34,172,251,1)",
"font-weight": "Normal",
"background": "rgba(255,255,255,1)",
"font-style": "Normal",
},
}
;